<template>
    <div class="flex-column-center xp-component" @click="open" title="时钟">
        <div class="xp-time">
            {{time}}
        </div>
        <div class="xp-date">
            {{date}}
        </div>

        <div class="fullScreen-icon" title="全屏">
            <el-icon @click.stop="handleFullScreen"><FullScreen /></el-icon>
        </div>
    </div>
    <teleport to="body">
        <div class="fullTime-box flex-center" v-if="fullTimeVisible">
            <xpFlipClock></xpFlipClock>
            <div class="fullScreen-icon" title="退出全屏" style="display:inline-block">
                <el-icon @click="handleCancelFull" :size="30" color="#808080"><FullScreen /></el-icon>
            </div>
        </div>
    </teleport>
</template>

<script lang="ts">
import { formatWeek } from '@/utils/util';
import { reactive, toRefs, defineComponent, computed, onMounted } from 'vue';
import xpFlipClock from '@/components/xpFlipClock/xpFlipClock.vue';
import usefullScreen from '@/hooks/usefullScreen';
export default defineComponent({
    name: 'xpTime',
    components: {
        xpFlipClock
    },
    props: {
    },
    emits: ['open'],
    setup (props, context) 
    {
        const { ScreenFull } = usefullScreen();
        let data = reactive({
            options:{
                type:'slot',
                id:'1000',
                name:'时钟',
                component:'xpTimes',
                xIcon:require('@/assets/app/clock.svg'),
                background:'#ebb105'
            },
            time:'',
            date:'',
            fullTimeVisible:false
        });
        let methods = {
            open ()
            {
                context.emit('open', data.options);
            },
            getTime ()
            {
                let date = new Date();
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                let hh = date.getHours() < 10 ? '0' +  date.getHours() : date.getHours();
                let mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                let day = date.getDay();

                data.time = hh + ':' + mf + ':' + ss;
                data.date = yy + '/' + mm + '/' + dd + ' ' + formatWeek(day);

            },
            handleFullScreen ()
            {
                data.fullTimeVisible = true;
                ScreenFull();
            },
            handleCancelFull ()
            {
                ScreenFull();
                data.fullTimeVisible = false;
            }
        };

        onMounted(() => 
        {
            methods.getTime();
            setInterval(() => 
            {
                methods.getTime();
            }, 1000);
        });
        return {
            ...toRefs(data),
            ...methods
        };
    }
});
</script>
<style lang='scss' scoped>
.fullTime-box {
    position: absolute;
    z-index: 9999;
    background-color: $BackgroundColor;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.xp-component {
    width: 100%;
    height: 100%;
    position: relative;

    .xp-time {
        font-size: 3.85em;
        font-weight: bold;
    }

    .xp-date {
        font-size: 1em;
        margin-top: 5px;
    }

    &:hover {
        .fullScreen-icon {
            display: inline-block;
        }
    }
}

.fullScreen-icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 15px;
    transition: all .3s;
    cursor: pointer;

    &:hover {
        color:$PrimaryColor;
    }
}
</style>
